<template>
  <div id="app">
    <div class="app-container">
      <!-- 导航栏 -->
      <nav class="navbar">
        <div class="nav-left">
          <button class="menu-toggle" @click="toggleMobileMenu" v-if="isMobile">
            <i class="fas" :class="showMobileMenu ? 'fa-times' : 'fa-bars'"></i>
          </button>
          <a href="#" class="logo">
            <i class="fas fa-blog"></i>
            <span>LuoDeng</span>博客
          </a>
        </div>
        <div class="nav-right" :class="{ 'mobile-menu-open': showMobileMenu }">
          <div class="nav-links">
            <a href="#" 
               :class="{ active: currentPage === 'home' }" 
               @click.prevent="changePage('home')">
              <i class="fas fa-home"></i>
              <span>首页</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'articles' }" 
               @click.prevent="changePage('articles')">
              <i class="fas fa-book-open"></i>
              <span>文章</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'weekly' }" 
               @click.prevent="changePage('weekly')">
              <i class="fas fa-calendar-week"></i>
              <span>周报</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'todo' }" 
               @click.prevent="changePage('todo')">
              <i class="fas fa-tasks"></i>
              <span>待办</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'projects' }" 
               @click.prevent="changePage('projects')">
              <i class="fas fa-code-branch"></i>
              <span>项目</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'life' }" 
               @click.prevent="changePage('life')">
              <i class="fas fa-heart"></i>
              <span>人生</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'diary' }" 
               @click.prevent="changePage('diary')">
              <i class="fas fa-book"></i>
              <span>日记</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'about' }" 
               @click.prevent="changePage('about')">
              <i class="fas fa-user"></i>
              <span>关于</span>
            </a>
            <a href="#" 
               :class="{ active: currentPage === 'contact' }" 
               @click.prevent="changePage('contact')">
              <i class="fas fa-envelope"></i>
              <span>联系</span>
            </a>
            <template v-if="isLoggedIn">
              <a href="#" 
                 :class="{ active: currentPage === 'publish' }" 
                 @click.prevent="changePage('publish')">
                <i class="fas fa-pen-fancy"></i>
                <span>发布</span>
              </a>
            </template>
            <template v-if="!isLoggedIn">
              <a href="#" 
                 :class="{ active: currentPage === 'login' }" 
                 @click.prevent="changePage('login')">
                <i class="fas fa-sign-in-alt"></i>
                <span>登录</span>
              </a>
            </template>
            <template v-else>
              <div class="user-menu" @click.stop>
                <button class="user-menu-btn" @click.stop="toggleUserMenu">
                  <img v-if="user.avatar" :src="user.avatar" :alt="user.username" class="user-avatar">
                  <div v-else class="user-avatar-placeholder">
                    {{ user.username.charAt(0).toUpperCase() }}
                  </div>
                  <span class="username">{{ user.username }}</span>
                  <i class="fas fa-chevron-down"></i>
                </button>
                <div class="user-dropdown" v-show="showUserMenu">
                  <a href="#" @click.stop.prevent="changePage('profile')">
                    <i class="fas fa-user-circle"></i>
                    <span>个人中心</span>
                  </a>
                  <a href="#" @click.stop.prevent="changePage('settings')">
                    <i class="fas fa-cog"></i>
                    <span>设置</span>
                  </a>
                  <div class="dropdown-divider"></div>
                  <a href="#" @click.stop.prevent="handleLogout">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                  </a>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- 移动端遮罩层 -->
        <div class="mobile-overlay" v-if="isMobile && showMobileMenu" @click="toggleMobileMenu"></div>
      </nav>
      
      <!-- 页面内容区域 -->
      <main class="main-content">
        <transition 
          name="page" 
          mode="out-in"
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave">
          <component 
            :is="currentComponent" 
            :key="currentPage"
            :profile="profile"
            :posts="posts"
            :user="user"
            @change-page="changePage"
            @post-click="handlePostClick"
            @login-success="handleLoginSuccess"
            class="page-component">
          </component>
        </transition>
      </main>
      
      <!-- 页脚 -->
      <footer class="footer">
        <p>© {{ new Date().getFullYear() }} 星辰博客 | 用代码书写人生，用技术创造价值</p>
      </footer>
    </div>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Articles from './components/Articles.vue'
import Projects from './components/Projects.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
import Login from './components/Login.vue'
import ArticlePublish from './components/ArticlePublish.vue'
import Weekly from './components/Weekly.vue'
import Todo from './components/Todo.vue'
import Life from './components/Life.vue'
import Diary from './components/Diary.vue'

export default {
  name: 'App',
  components: {
    Home,
    Articles,
    Projects,
    About,
    Contact,
    Login,
    ArticlePublish,
    Weekly,
    Todo,
    Life,
    Diary
  },
  data() {
    return {
      currentPage: 'home',
      isLoggedIn: false,
      showUserMenu: false,
      user: null,
      profile: {
        name: '罗邓',
        title: '卫宁实施工程师',
        description: '热爱编程、设计和分享技术知识，专注于现代Web开发技术。',
        socials: [
          { icon: 'fab fa-github', link: 'https://github.com' },
          { icon: 'fab fa-twitter', link: 'https://twitter.com' },
          { icon: 'fab fa-linkedin-in', link: 'https://linkedin.com' },
          { icon: 'fab fa-instagram', link: 'https://instagram.com' }
        ]
      },
      posts: [
        {
          id: 1,
          title: 'Vue3 组合式 API 最佳实践',
          excerpt: '探索 Vue3 组合式 API 的强大功能及其在实际项目中的应用技巧。',
          tag: 'Vue.js',
          date: '2023-10-15',
          readTime: 8,
          color: 'linear-gradient(45deg, #a78bfa, #c084fc)'
        },
        {
          id: 2,
          title: 'CSS 现代布局技术全解析',
          excerpt: '深入了解 Flexbox、Grid 和容器查询等现代 CSS 布局技术的使用。',
          tag: 'CSS',
          date: '2023-10-10',
          readTime: 12,
          color: 'linear-gradient(45deg, #fbcfe8, #f9a8d4)'
        },
        {
          id: 3,
          title: 'JavaScript 性能优化指南',
          excerpt: '提升 JavaScript 应用性能的实用技巧和最佳实践。',
          tag: 'JavaScript',
          date: '2023-10-05',
          readTime: 10,
          color: 'linear-gradient(45deg, #93c5fd, #60a5fa)'
        },
        {
          id: 4,
          title: '响应式设计深度解析',
          excerpt: '掌握响应式设计的核心原则，创建适应各种设备的完美用户体验。',
          tag: '设计',
          date: '2023-10-01',
          readTime: 6,
          color: 'linear-gradient(45deg, #86efac, #4ade80)'
        },
        {
          id: 5,
          title: 'TypeScript 高级类型技巧',
          excerpt: '探索 TypeScript 的高级类型系统和类型操作，提升代码质量。',
          tag: 'TypeScript',
          date: '2023-09-28',
          readTime: 9,
          color: 'linear-gradient(45deg, #fda4af, #f87171)'
        },
        {
          id: 6,
          title: '现代前端构建工具比较',
          excerpt: '对比 Webpack、Vite、Rollup 和 Parcel 等现代前端构建工具。',
          tag: '工具',
          date: '2023-09-25',
          readTime: 11,
          color: 'linear-gradient(45deg, #fcd34d, #fbbf24)'
        },
      ],
      showMobileMenu: false,
      isMobile: false,
    }
  },
  computed: {
    currentComponent() {
      switch (this.currentPage) {
        case 'home':
          return Home
        case 'articles':
          return Articles
        case 'projects':
          return Projects
        case 'about':
          return About
        case 'contact':
          return Contact
        case 'login':
          return Login
        case 'publish':
          return ArticlePublish
        case 'weekly':
          return Weekly
        case 'todo':
          return Todo
        case 'life':
          return Life
        case 'diary':
          return Diary
        default:
          return null
      }
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page
      this.showUserMenu = false
    },
    handlePostClick(post) {
      console.log('Post clicked:', post)
    },
    handleLoginSuccess(userData) {
      this.user = {
        ...userData,
        avatar: 'https://qlogo4.store.qq.com/qzone/3066992141/3066992141/100?1748115689'
      }
      this.isLoggedIn = true
      this.currentPage = 'home'
      // 可以在这里保存登录状态到 localStorage
      localStorage.setItem('user', JSON.stringify(this.user))
    },
    handleLogout() {
      this.user = null
      this.isLoggedIn = false
      this.showUserMenu = false
      this.currentPage = 'home'
      // 清除登录状态
      localStorage.removeItem('user')
    },
    toggleUserMenu(event) {
      if (event) {
        event.stopPropagation()
      }
      this.showUserMenu = !this.showUserMenu
    },
    closeUserMenu() {
      this.showUserMenu = false
    },
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(20px)'
    },
    enter(el, done) {
      requestAnimationFrame(() => {
        el.style.transition = 'all 0.5s ease-out'
        el.style.opacity = 1
        el.style.transform = 'translateY(0)'
        el.addEventListener('transitionend', done)
      })
    },
    leave(el, done) {
      el.style.transition = 'all 0.3s ease-in'
      el.style.opacity = 0
      el.style.transform = 'translateY(-20px)'
      el.addEventListener('transitionend', done)
    },
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu
      // 当菜单打开时禁止背景滚动
      document.body.style.overflow = this.showMobileMenu ? 'hidden' : ''
    },
    checkMobile() {
      this.isMobile = window.innerWidth <= 768
      if (!this.isMobile) {
        this.showMobileMenu = false
        document.body.style.overflow = ''
      }
    },
    handleResize() {
      this.checkMobile()
    }
  },
  created() {
    // 检查是否有保存的登录状态
    const savedUser = localStorage.getItem('user')
    if (savedUser) {
      try {
        this.user = JSON.parse(savedUser)
        this.isLoggedIn = true
      } catch (e) {
        console.error('Failed to parse saved user data:', e)
        localStorage.removeItem('user')
      }
    }
  },
  mounted() {
    // 使用箭头函数保持 this 的指向
    const handleClickOutside = (event) => {
      const userMenu = this.$el.querySelector('.user-menu')
      if (userMenu && !userMenu.contains(event.target)) {
        this.closeUserMenu()
      }
    }
    
    // 保存事件处理函数的引用
    this._clickOutsideHandler = handleClickOutside
    
    // 添加事件监听器
    document.addEventListener('click', this._clickOutsideHandler)
    this.checkMobile()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 使用保存的事件处理函数引用移除监听器
    if (this._clickOutsideHandler) {
      document.removeEventListener('click', this._clickOutsideHandler)
    }
    window.removeEventListener('resize', this.handleResize)
    document.body.style.overflow = ''
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --secondary: #f472b6;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #94a3b8;
  --gray-light: #e2e8f0;
  --card-bg: rgba(255, 255, 255, 0.9);
  --transition: all 0.3s ease;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
}

body {
  font-family: 'Inter', 'Poppins', sans-serif;
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  color: var(--dark);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  line-height: 1.6;
}

/* Markdown 样式 */
.markdown-body {
  font-family: 'Inter', sans-serif;
  line-height: 1.8;
  color: var(--dark);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dark);
}

.markdown-body h1 { font-size: 2em; }
.markdown-body h2 { font-size: 1.5em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.875em; }
.markdown-body h6 { font-size: 0.85em; }

.markdown-body p {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body ul,
.markdown-body ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 2em;
}

.markdown-body li {
  margin-top: 0.25em;
}

.markdown-body code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(175, 184, 193, 0.2);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}

.markdown-body pre {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 6px;
}

.markdown-body pre code {
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 0;
  word-break: normal;
  white-space: pre;
}

.markdown-body blockquote {
  margin: 0 0 16px;
  padding: 0 1em;
  color: #656d76;
  border-left: 0.25em solid #d0d7de;
}

.markdown-body hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #d0d7de;
  border: 0;
}

.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 16px 0;
  width: 100%;
  overflow: auto;
}

.markdown-body table th {
  font-weight: 600;
  padding: 6px 13px;
  border: 1px solid #d0d7de;
}

.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #d0d7de;
}

.markdown-body table tr {
  background-color: #ffffff;
  border-top: 1px solid #d0d7de;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

/* 导航栏样式优化 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--card-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.nav-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 8px;
  justify-content: flex-end;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links a {
  text-decoration: none;
  color: var(--dark);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  background: transparent;
}

.nav-links a i {
  font-size: 1rem;
  transition: var(--transition);
}

.nav-links a:hover i, 
.nav-links a.active i {
  transform: translateY(-1px);
}

.nav-links a:hover, 
.nav-links a.active {
  background: var(--primary-light);
  color: white;
}

/* 页面内容区域样式 */
.page-component {
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 页脚样式 */
.footer {
  text-align: center;
  padding: 16px;
  background: var(--card-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  margin-top: 16px;
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .navbar {
    padding: 6px 12px;
  }

  .logo {
    font-size: 1.1rem;
  }

  .nav-links {
    gap: 2px;
  }

  .nav-links a {
    padding: 4px 8px;
    font-size: 0.85rem;
  }

  .nav-links a i {
    font-size: 0.9rem;
  }

  .page-component {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .nav-links a span {
    display: none;
  }

  .nav-links a {
    padding: 6px;
  }

  .nav-links a i {
    margin: 0;
    font-size: 1rem;
  }

  .logo span {
    display: none;
  }
}

/* 用户菜单样式 */
.user-menu {
  position: relative;
  z-index: 1000; /* 确保菜单在最上层 */
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--dark);
  cursor: pointer;
  border-radius: 50px;
  transition: var(--transition);
}

.user-menu-btn:hover {
  background: var(--primary-light);
  color: white;
}

.user-avatar,
.user-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-placeholder {
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
}

.username {
  font-size: 0.9rem;
  font-weight: 500;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  min-width: 180px;
  z-index: 1001; /* 确保下拉菜单在按钮上方 */
  overflow: hidden;
}

.user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--dark);
  text-decoration: none;
  transition: var(--transition);
}

.user-dropdown a:hover {
  background: var(--primary-light);
  color: white;
}

.user-dropdown a i {
  width: 20px;
  text-align: center;
}

.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 4px 0;
}

@media (max-width: 900px) {
  .user-menu-btn {
    padding: 4px 8px;
  }

  .user-avatar,
  .user-avatar-placeholder {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }

  .username {
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  .user-menu-btn {
    padding: 3px 6px;
  }

  .user-avatar,
  .user-avatar-placeholder {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .username {
    display: none;
  }

  .user-dropdown {
    right: -10px;
  }
}

/* 移动端菜单按钮 */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--dark);
  font-size: 1.5rem;
  padding: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.menu-toggle:hover {
  color: var(--primary);
}

/* 移动端导航样式 */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    margin-right: 12px;
  }

  .nav-right {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    padding: 80px 20px 20px;
    transition: var(--transition);
    z-index: 1000;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
  }

  .nav-right.mobile-menu-open {
    right: 0;
  }

  .nav-links {
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }

  .nav-links a {
    width: 100%;
    padding: 12px 16px;
    justify-content: flex-start;
    border-radius: 8px;
  }

  .nav-links a span {
    display: inline-block !important;
  }

  .nav-links a i {
    width: 24px;
    text-align: center;
  }

  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 999;
  }

  .user-menu {
    position: static;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-light);
  }

  .user-menu-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px;
  }

  .user-dropdown {
    position: static;
    margin-top: 8px;
    box-shadow: none;
    border: 1px solid var(--gray-light);
  }

  .username {
    display: inline-block !important;
  }
}

/* 优化小屏幕设备上的导航栏 */
@media (max-width: 480px) {
  .navbar {
    padding: 8px 12px;
  }

  .logo {
    font-size: 1.1rem;
  }

  .logo span {
    display: inline-block !important;
  }

  .nav-right {
    width: 100%;
    max-width: 280px;
  }
}

/* 确保页面内容在移动端菜单打开时不会滚动 */
body.menu-open {
  overflow: hidden;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1 0 auto;
  width: 100%;
}

/* 页脚样式优化 */
.footer {
  flex-shrink: 0;
  text-align: center;
  padding: 16px;
  background: var(--card-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  margin-top: auto;
  width: 100%;
  backdrop-filter: blur(10px);
}

.footer p {
  margin: 0;
  color: var(--dark);
  font-size: 0.9rem;
}

/* 页面内容区域样式优化 */
.page-component {
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  min-height: calc(100vh - 140px); /* 减去导航栏和页脚的高度 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .footer {
    padding: 12px;
  }

  .footer p {
    font-size: 0.85rem;
  }

  .page-component {
    min-height: calc(100vh - 120px);
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 10px;
  }

  .footer p {
    font-size: 0.8rem;
  }
}
</style>
